<template>
    <page-wrapper>
        <table-search @search="search(1)" :isSearch="showSearch" :isExtra="showSearch" @reset="reset()">
            <template #form>
                <form-item label="">
                    <a-input v-model:value="formState.username" placeholder="姓名" />
                </form-item>
                <form-item label="">
                    <a-input v-model:value="formState.phone" placeholder="手机号" />
                </form-item>
                <form-item label="">
                    <a-tree-select v-model:value="formState.depart_id" show-search style="width: 200px"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择部门" allow-clear
                        tree-default-expand-all :fieldNames="fieldNames" :tree-data="departList"
                        tree-node-filter-prop="label">
                    </a-tree-select>
                </form-item>
                <form-item label="">
                    <a-select v-model:value="formState.role_id" style="width: 200px" allowClear placeholder="请选择角色">
                        <a-select-option :value="item.id" v-for="item in roleList" :key="item.id">{{ item.name
                        }}</a-select-option>
                    </a-select>
                </form-item>
                <form-item label="">
                    <a-select v-model:value="formState.status" style="width: 200px" allowClear placeholder="请选择状态">
                        <a-select-option :value="0">停用</a-select-option>
                        <a-select-option :value="1">正常</a-select-option>
                    </a-select>
                </form-item>
            </template>
            <template #extra>
                <a-space>
                    <a-button type="primary" @click="pickItem(null)"><plus-outlined />新增用户</a-button>
                    <!-- <div class="upload_item">
                        <a-button><plus-outlined />批量上传</a-button>
                        <input class="file" type="file" accept="xlsx"/>
                    </div> -->
                    <a-button type="primary" danger :disabled="selectedRowKeys.length ? false : true"
                        @click="removeItem(null, remove, '确定删除所选用户？', 'id')"><delete-outlined />删除</a-button>
                </a-space>
            </template>
        </table-search>
        <a-table :columns="columns" bordered :loading="loading" :dataSource="list" rowKey="id" :scroll="{ x: 1200 }"
            :pagination="pagination" :row-selection="showSearch ? selection : null">
            <template #bodyCell="{ column, record, index }">
                <template v-if="column.key == 'index'">
                    <span>{{ startLimit + index }}</span>
                </template>
                <template v-if="column.key == 'avatar'">
                    <a-avatar :src="record.avatar" shape="square" :size="48">
                        <template #icon><UserOutlined /></template>
                    </a-avatar>
                </template>
                <template v-else-if="column.key === 'status'">
                    <a-switch v-model:checked="record.status" @change="changeStatus(index, record)" checked-children="开"
                        un-checked-children="关" />
                </template>
                <template v-else-if="column.key === 'action'">
                    <a-space>
                        <a-button size="small" type="primary" block @click="pickItem(record)">编辑</a-button>
                        <a-button size="small" type="primary" danger block
                            @click="removeItem(record, remove, `确定删除人员：${record.username}?`, 'id')">删除</a-button>
                    </a-space>
                </template>
            </template>
        </a-table>

        <template v-if="showInfo">
            <ItemInfo :role-list="roleList" :dept-list="departList" :info="showItem" @cancel="close" @submit="search()" />
        </template>

    </page-wrapper>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { useTable } from '@/hooks/use-table/index'
import { columns } from './columns'
import { remoteList, remove, update } from '@/api/system/user/index'
import departApi from '@/api/system/depart/index'
import roleApi from '@/api/system/role/index'
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { IDepart } from '../depart/depart.type'
import { IRole } from '../role/role.type'
import ItemInfo from './components/info.vue'
import { IUser } from './user.type'
import { message } from 'ant-design-vue'

const props = defineProps({
    showSearch: {
        type: Boolean,
        default: true
    },
    role_id: {
        type: [String, Number],
        default: ''
    },
    dept_id: {
        type: [String, Number],
        default: ''
    }
})
let fieldNames = {
    children: 'children',
    label: 'name',
    value: 'id'
}
const formState = reactive<IUser>({
    username: '',
    phone: '',
    depart_id: undefined,
    role_id: undefined,
    status: undefined
})
let {
    list,
    selectedRowKeys,
    startLimit,
    loading,
    pagination,
    showInfo,
    showItem,
    pickItem,
    search,
    selection,
    removeItem,
    reset,
    close
} = useTable(remoteList, formState);

//筛选内容
let departList = ref<IDepart[]>([]);
let roleList = ref<IRole[]>([]);
//监听属性变化
watch(() => [props.dept_id, props.role_id], (values) => {
    let deptId = values[0]
    let roleId = values[1]
    formState.depart_id = deptId
    formState.role_id = roleId
    if(roleId || deptId){
        search(1)
    }
}, {
    immediate: true
})
onMounted(async () => {
    let departResult = await departApi.remoteList({});
    let roleResult = await roleApi.remoteList({});
    departList.value = departResult.data;
    roleList.value = roleResult.data;
})

//切换用户状态
const changeStatus = async (index: number, item: IUser) => {
    loading.value = true;
    try {
        await update(item);
        message.success('更新成功')
    } catch (err) {
        list.value[index].status = !item.status
    } finally {
        loading.value = false;
    }
}

</script>
<style lang="scss" scoped>
.upload_item{
    position: relative;
    .file{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        opacity: 0;
    }
}
</style>